//导入path模块
const path = require('path')

//导入webpack模块,热更新的第2步
// const webpack = require('webpack')

//导入html-webpack-plugin模块 在内存中自动生成html页面的插件
const htmlWebpackPlugin = require('html-webpack-plugin')

//向外暴露一个模块对象
module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    // devServer:{
    //     open:true,//自动打开浏览器
    //     port:3000,//设置运行时的端口
    //     hot:true//启用热更新，第1步
    //     //contentBase:'src'//指定托管目录
    // },
    plugins:[
        // new webpack.HotModuleReplacementPlugin(),//new 一个热更新的插件对象 启动热更新的第3步
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},//配置处理第三方样式文件的loader使用规则
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            { test:/\.(jpg|png|jpeg|gif|bmp)$/,use:'url-loader'},
            { test:/\.(svg|eot|woff|woff2|ttf)$/,use: 'url-loader' },
            { test:/\.js$/,use:'babel-loader',exclude:/node_modules/ },//配置处理高级js的处理规则
            { test:/\.vue$/,use:'vue-loader' }//对vue后缀的文件配置loader文件
        ]
    },
    resolve:{
        // alias:{
        //     "vue$":"vue/dist/vue.js"
        // }
    }
}